<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
      <!--添加tab切换栏-->
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabContent">
          <el-tab-pane label="订单详情" name="orderDetail">
            <!--切换订单详情显示的内容-->

            <basic-container>
              <h2 class="io-goods-detail">
                基础信息
              </h2>
              <template>
                <el-row class="io-goods-detail basic-information">
                  <el-col :span="6"><div class="grid-content bg-purple">退货单号：{{topData.returnSn}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple-light">审核状态：{{topData.$returnStatus}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple"></div>客户名称：{{topData.returnCustomer}}</el-col>
                  <el-col :span="6"><div class="grid-content bg-purple-light"></div>原订单号:{{topData.orderSn}}</el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                  <el-col :span="6"><div class="grid-content bg-purple-light">合计金额：{{topData.totalAmount}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple"></div>退货原因：{{topData.returnReason}}</el-col>
                </el-row>
              </template>
            </basic-container>
            <basic-container>
              <h2 class="io-goods-detail">
                  订单退货商品清单
              </h2>
              <template>
                <el-table
                  :data="tableData"
                  style="width: 100%"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                  <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                  <el-table-column label="商品图片" align="center">
                    <template slot-scope="scope">
                      <img :src="scope.row.goodsImg" height="50px"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
                  <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                  <el-table-column label="订单数量" prop="goodsNum" align="center"></el-table-column>
                  <el-table-column label="发货单价" prop="goodsPrice" align="center"></el-table-column>
                  <el-table-column label="发货金额" prop="goodsAmount" align="center">
                  </el-table-column>
                  <!--<el-table-column label="备注" prop="desc" align="center"></el-table-column>-->
                </el-table>
                <div>
                  <h3 class="settle-accounts">其它费用:{{topData.otherAmount}}</h3>
                  <h3 class="settle-accounts">合计金额:{{topData.totalAmount}}</h3>
                </div>
              </template>
            </basic-container>
            <basic-container>
              <!--<h2 class="io-goods-detail">-->
                <!--单据操作历史-->
              <!--</h2>-->
              <!--<template>-->
                <!--<el-table-->
                  <!--:data="operationalHistory"-->
                  <!--style="width: 100%"-->
                  <!--:header-cell-style="{background:'#eef1f6',color:'#606266'}">-->
                  <!--<el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>-->
                  <!--<el-table-column label="操作时间" prop="operatingTime" align="center"></el-table-column>-->
                  <!--<el-table-column label="操作人" prop="operator" align="center"></el-table-column>-->
                  <!--<el-table-column label="类型" prop="type" align="center"></el-table-column>-->
                  <!--<el-table-column label="日志" prop="log" align="center"></el-table-column>-->
                <!--</el-table>-->
              <!--</template>-->
              <template>
                <div class="return-btn">
                  <el-button type="primary" plain @click="backup">返回</el-button>
                </div>
              </template>
            </basic-container>

          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
</template>
<!-- 采购退货 -->
<script>
    import {
      getDetail
    }from '@/api/scm/order/return_order'
    import {
        mapGetters
    } from 'vuex'
    import Util from '@/util/pds/utils';
    let cookieUtil = new Util();
    export default {
        name: 'addpurchaseback',
        data() {
            return {
                activeName: 'orderDetail',
                tableData: [],
                topData:''
            }
        },
        created(){
            this.init();
        },
        computed: {
            ...mapGetters(['permissions'])
        },
        methods:{
            init(){
              let params = JSON.parse(this.$route.query.res);
              params.purchaseSn = params.orderSn;
              getDetail(params).then(response => {
                this.tableData = response.data.data.detailList;
                this.topData = response.data.data;
              })
            },
            backup:function () {
                this.$router.go(-1);
            },
            handleClick(tab, event) {
              console.log(tab, event);
            }
        }
    }
</script>

<style lang="scss">
    .io-goods-detail{
        margin-bottom: 10px;
    }
    .settle-accounts{
        text-align: right;
    }
    .basic-information {
        margin-top: 20px;
        font-weight: inherit;
    }
    .return-btn{
        height: 100px;
        width: 100%;
        text-align: center;
        line-height: 100px;
    }
  .tabContent{
    padding-left: 10px;
    .el-tabs__item{
      font-size: 20px;
    }
  }
</style>
